<template>
  <el-row>
    <el-col :span="6">
      <div class="box">
        <el-scrollbar>
          <basic-container>
            <el-input v-model="filterText" placeholder="输入关键字过滤"/>
            <el-tree
              ref="tree"
              class="filter-tree"
              :data="treedata"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              @node-click="nodeClick"></el-tree>
          </basic-container>
        </el-scrollbar>
      </div>
    </el-col>

    <el-col :span="18">
      <basic-container>
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="data"
                   ref="crud"
                   v-model="form"
                   :page="page"
                   :permission="permissionList"
                   :search.sync="search"
                   @row-save="rowSave"
                   @row-update="rowUpdate"
                   @row-del="rowDel"
                   :before-open="beforeOpen"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange"
                   @cell-click="cellClick"
                   @on-load="onLoad">
          <template slot-scope="{row}" slot="roleId">
            <el-tag v-for="(item,index) in row.roles">{{item.roleName}}</el-tag>
          </template>
        </avue-crud>
      </basic-container>
    </el-col>
  </el-row>
</template>

<script>
import {
  userPage,
  getUser,
  remove,
  update,
  create,
  grant,
  resetPassword,
  exportUser
} from "@/api/system/user";
import {getDeptTree} from "@/api/system/dept";
import {getRoleList} from "@/api/system/role";
import {getPostList} from "@/api/system/post";
import {mapGetters} from "vuex";
import website from '@/config/website';
import {getToken} from '@/util/auth';
import {baseUrl} from "@/config/env";
export default {
  name: "flowable",
  data() {
    return {
      form: {},
      search: {},
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      treedata: [],
      selectDep: null,
      loading: true,
      selectionList: [],
      query: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      init: {
        roleTree: [],
        deptTree: [],
      },
      option: {
        height: 'auto',
        calcHeight: 210,
        searchShow: true,
        searchMenuSpan: 6,
        tip: false,
        border: true,
        index: true,
        selection: true,
        viewBtn: true,
        column: [
          {
            label: "名称",
            prop: "name",
            rules: [{
              required: true,
              message: "请输入",
              trigger: "blur"
            }],
          },
          {
            label: "KEY",
            prop: "modelKey",
            rules: [{
              required: true,
              message: "请输入",
              trigger: "click"
            }]
          },
          {
            label: '分类名称',
            prop: 'categoryName',
            rules: [{required: true, message: "", trigger: 'blur'}]
          },
          {
            label: '系统',
            prop: 'appName',
            rules: [{required: true, message: "", trigger: 'blur'}]
          },
          {
            label: "应用范围",
            prop: "appSn",
            rules: [{
              required: true,
              message: "请输入",
              trigger: "blur"
            }]
          },
          {
            label: "状态",
            prop: "statusName",
            rules: [{
              required: true,
              message: "请输入",
              trigger: "blur"
            }]
          },
          {
            label: "更新时间",
            prop: "updateTime",
            rules: [{
              required: true,
              message: "请输入",
              trigger: "blur"
            }]
          }
        ]
      },
      data: [],
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    selectDep(val) {
      userPage(this.page.currentPage, this.page.pageSize, {deptId: val}).then(res => {
        const data = res.data;
        this.page.total = data.count;
        this.data = data.data;
        this.loading = false;
      });
    }
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.user_add, false),
        viewBtn: this.vaildData(this.permission.user_view, false),
        delBtn: this.vaildData(this.permission.user_delete, false),
        editBtn: this.vaildData(this.permission.user_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },

  },
  methods: {
    rowSave(row, done, loading) {
      row.deptId = row.deptId.join(",");
      row.roleId = row.roleId.join(",");
      row.postId = row.postId.join(",");
      create(row).then(() => {
        done();
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    },
    rowUpdate(row, index, done, loading) {
      console.log("-----", row)
      row.deptId = row.deptId.join(",");
      row.roleId = row.roleId.join(",");
      row.postId = row.postId.join(",");
      console.log("-----", row)
      update(row).then(() => {
        done();
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    beforeOpen(done, type) {
      console.log("----->", done, type)
      if (["edit", "view"].includes(type)) {
        getUser(this.form.id).then(res => {
          this.form = res.data.data;
          if (this.form.hasOwnProperty("deptId")) {
            this.form.deptId = this.form.deptId.split(",");
          }
          if (this.form.hasOwnProperty("roleId")) {
            this.form.roleId = this.form.roleId.split(",");
          }
          if (this.form.hasOwnProperty("postId")) {
            this.form.postId = this.form.postId.split(",");
          }
        });
      }
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    cellClick(row) {
      this.$refs.crud.toggleSelection([row]);
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      userPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data;
        this.page.total = data.count;
        // this.data = data.data;
        this.data = [
          {
            "createTime": "2022-03-17 16:30:23",
            "creator": "10101",
            "updateTime": "2022-03-17 16:30:23",
            "updator": null,
            "delFlag": 1,
            "keyword": null,
            "id": "17eb7963e31a8c8227243aacfdfc2241",
            "modelId": "7d31f49fa5cc11ec8dcdba8486f9ade6",
            "name": "hugg测试",
            "modelKey": "hugg",
            "modelType": 0,
            "formType": null,
            "appSn": "portal",
            "appName": "门户",
            "categoryCode": "66",
            "categoryName": "合同管理",
            "status": 2,
            "statusName": "待发布",
            "extendStatus": 2,
            "extendStatusName": null,
            "ownDeptId": null,
            "ownDeptName": null,
            "flowOwnerNo": null,
            "flowOwnerName": null,
            "processDockingNo": null,
            "processDockingName": null,
            "applyCompanies": null,
            "showStatus": null,
            "appliedRange": null,
            "appliedRangeName": null,
            "authPointList": null,
            "superuser": null,
            "businessUrl": null,
            "skipSet": null,
            "modelIcon": null,
            "orderNo": null,
            "categoryCodes": null,
            "processDefinitionId": null,
            "modelXml": null
          },
          {
            "createTime": "2022-03-17 13:41:54",
            "creator": "10101",
            "updateTime": "2022-03-17 16:29:04",
            "updator": "10101",
            "delFlag": 1,
            "keyword": null,
            "id": "91f5ed76346fd95e5865b016ddf3534d",
            "modelId": "f3904f80a5b411ec8dcdba8486f9ade6",
            "name": "测试流程1",
            "modelKey": "test_fllow_key_11",
            "modelType": 0,
            "formType": null,
            "appSn": "portal",
            "appName": "门户",
            "categoryCode": "66",
            "categoryName": "合同管理",
            "status": 1,
            "statusName": "草稿",
            "extendStatus": 2,
            "extendStatusName": null,
            "ownDeptId": null,
            "ownDeptName": null,
            "flowOwnerNo": null,
            "flowOwnerName": null,
            "processDockingNo": null,
            "processDockingName": null,
            "applyCompanies": null,
            "showStatus": null,
            "appliedRange": null,
            "appliedRangeName": null,
            "authPointList": null,
            "superuser": null,
            "businessUrl": null,
            "skipSet": null,
            "modelIcon": null,
            "orderNo": null,
            "categoryCodes": null,
            "processDefinitionId": null,
            "modelXml": null
          },
          {
            "createTime": "2022-03-17 10:54:00",
            "creator": "10101",
            "updateTime": "2022-03-17 16:17:36",
            "updator": "10101",
            "delFlag": 1,
            "keyword": null,
            "id": "f07f300da9b091caa526a51923986ad3",
            "modelId": "7f37bb2ea59d11ec8dcdba8486f9ade6",
            "name": "cc",
            "modelKey": "cc",
            "modelType": 0,
            "formType": null,
            "appSn": "portal",
            "appName": "门户",
            "categoryCode": "222",
            "categoryName": "中石化集团",
            "status": 1,
            "statusName": "草稿",
            "extendStatus": 2,
            "extendStatusName": null,
            "ownDeptId": null,
            "ownDeptName": null,
            "flowOwnerNo": null,
            "flowOwnerName": null,
            "processDockingNo": null,
            "processDockingName": null,
            "applyCompanies": null,
            "showStatus": null,
            "appliedRange": null,
            "appliedRangeName": null,
            "authPointList": null,
            "superuser": null,
            "businessUrl": null,
            "skipSet": null,
            "modelIcon": null,
            "orderNo": null,
            "categoryCodes": null,
            "processDefinitionId": null,
            "modelXml": null
          },
          {
            "createTime": "2021-09-28 11:38:00",
            "creator": "10101",
            "updateTime": "2022-03-17 16:18:23",
            "updator": "10101",
            "delFlag": 1,
            "keyword": null,
            "id": "e4f3ff64f53d1f7580faec85fc82252f",
            "modelId": "7a76271c200d11ecbaee00e04d680167",
            "name": "请假",
            "modelKey": "leave",
            "modelType": 0,
            "formType": null,
            "appSn": "flow",
            "appName": "流程中心",
            "categoryCode": "222",
            "categoryName": "中石化集团",
            "status": 2,
            "statusName": "待发布",
            "extendStatus": 2,
            "extendStatusName": null,
            "ownDeptId": null,
            "ownDeptName": null,
            "flowOwnerNo": null,
            "flowOwnerName": null,
            "processDockingNo": null,
            "processDockingName": null,
            "applyCompanies": null,
            "showStatus": null,
            "appliedRange": null,
            "appliedRangeName": null,
            "authPointList": null,
            "superuser": null,
            "businessUrl": null,
            "skipSet": null,
            "modelIcon": null,
            "orderNo": null,
            "categoryCodes": null,
            "processDefinitionId": null,
            "modelXml": null
          }
        ]
        this.loading = false;
      });
      getDeptTree().then(res => {
        this.treedata = res.data.data;
      });
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    nodeClick(data, node, item) {
      this.selectDep = data.id;
    },
  }
}
</script>

<style scoped>

</style>
